Skip to content

fix(google): refine AI chat styling and gradients#2260

Open
AvielSkrypnyk wants to merge 4 commits into
catppuccin:mainfrom
AvielSkrypnyk:fix/google-ai-chat
Open

fix(google): refine AI chat styling and gradients#2260
AvielSkrypnyk wants to merge 4 commits into
catppuccin:mainfrom
AvielSkrypnyk:fix/google-ai-chat

Conversation

@AvielSkrypnyk

@AvielSkrypnyk AvielSkrypnyk commented Jun 18, 2026

Copy link
Copy Markdown

📝 Checklist

  • I have read and followed Catppuccin's userstyle contributing guidelines.
  • I used AI (or AI-assistance) to improve wording in this PR description.

🔧 What does this fix?

Improves Catppuccin styling for Google AI chat by refining gradients, overlays, and background consistency.

Fixes issues where default Google styles conflicted with Catppuccin colors, causing visual inconsistencies and reduced readability.


🔍 Reproduction Steps

  1. Open Google Search with AI chat enabled
  2. Interact with the AI chat panel
  3. Compare collapsed and expanded states

Before

Collapsed
image

Expanded
image


After

Collapsed
image

Expanded
image

AvielSkrypnyk and others added 2 commits June 18, 2026 07:46
Remove default AI chat gradients and unify background layers to eliminate visual seams. Apply consistent Catppuccin colors across overlays, containers, and states.

- remove gradient overlay (.Zze5V)
- remove container and wrapper gradients
- normalize layered backgrounds to eliminate seams
- clean spacer overlay layer (.zNsLfb)
- replace default white fade (.RDmXvc) with Catppuccin gradient
- add subtle border and hover styling for AI responses
- add collapsed state tint using Catppuccin colors
Simplify gradient removal, normalize backgrounds, and improve consistency of Catppuccin surfaces across AI chat components.

- consolidate gradient removal into grouped selectors
- normalize layered backgrounds using @base to prevent seams
- add background color to response containers for consistency
- replace lighten() hover with @surface0 for better palette alignment
- strengthen collapsed state tint using fade(@crust, 35%)
- make gradient overlay more pronounced with higher opacity
@github-actions github-actions Bot added the google Google label Jun 18, 2026
@AvielSkrypnyk AvielSkrypnyk changed the title style(google): add and refine AI chat styling with Catppuccin colors fix(google): refine AI chat styling and gradients Jun 19, 2026
@AvielSkrypnyk

Copy link
Copy Markdown
Author

Just to add some context: this PR was created before I was aware that the Google userstyle is currently frozen and PRs are not being accepted (see #2262).

I completely understand the decision after reading the discussion — given how often Google (and similarly YouTube) changes their DOM and styling, it makes long-term maintenance very difficult.

I do like the idea of having Catppuccin styling for things like Google and YouTube, but I also see why it might not be worth continuing in this repository.

Sorry for the noise here — thanks for the clarification!

@WalkQuackBack WalkQuackBack added the 0.kind: bug Bug (i.e. unthemed components) label Jul 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

0.kind: bug Bug (i.e. unthemed components) google Google

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants